page{
    height: 100%;
}


.cates{
    height: 100%;
    .cates_container{
        /* less中使用calc的时候要注意 */
        height: ~'calc( 100vh - 90rpx )';
        display: flex;
        .left_menu{
            /* 子项 高度 100% flex */
            flex: 2;
            .menu_item{
                height: 80rpx;
                display: flex;
                // 水平居中
                justify-content: center;
                // 垂直居中
                align-items: center;
                // 字体大小
                font-size: 30rpx;
            }
            .active{
                color: var(--themeColor);
                border-left: 5rpx solid currentColor;
            }
        }
        .right_content{
            /* 子项 高度 100% flex */
            flex: 5;
            .goods_group{
                .goods_title{
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .delimiter{
                        color: #ccc;
                        padding: 0 10rpx;
                    }
                    .title{

                    }
                }
                .goods_list{
                    .goods_item{
                        display: flex;
                        // 分割
                        border-bottom: 1px solid #ccc;
                        // 图片容器
                        .goods_img_wrap{
                            flex: 2;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            image{
                                width: 70%;
                            }
                        }
                
                
                        // 商品容器
                        .goods_info_wrap{
                            flex: 3;
                            display: flex;
                            flex-direction: column;
                            // 空白环绕
                            justify-content: space-around;
                            .goods_name{
                                display: -webkit-box;
                                overflow: hidden;
                                -webkit-box-orient: vertical;
                                // 第几行显示... 后面就写几
                                -webkit-line-clamp: 2;
                            }
                            .goods_tool{
                                display: flex;
                                justify-content: space-between;
                                .goods_price{
                                    color: var(--themeColor);
                                    font-size: 32rpx;
                    
                                }
                                .iconfont{
                                   padding-right: 25rpx;
                                }
                            }

                        }
                
                    }
                }
            }
        }
    }
}